<template>
    <div style="width: 100%;margin-top: 20px">
        <div style="width: 50%;margin: 0 auto">
            <el-row>
                <!--标题-->
                <el-row>
                    <div style="width: 100%;display: flex;flex-direction: row;justify-content: center"><span style="font-size: 28px;font-family: 宋体">值班方案</span></div>
                </el-row>
                <!--列表-->
                <el-row>
                    <div class="allList">
                        <div class="listItem" v-for="(item,index) in Rules.list" :key="index" @click="handleChange(index)">
                            <el-icon class="el-icon-document-checked"></el-icon><span class="name9">{{item.ruleName}}</span>
                            <span style="float: right;"><el-icon class="el-icon-arrow-right"></el-icon></span>
                        </div>
                    </div>
                </el-row>
                <!--分页-->
                <el-row>
                    <div style="margin-top: 30px;display: flex;flex-direction: row;justify-content: space-around">
                        <div class="tesgt3243">
                            <el-pagination
                                    :hide-on-single-page="false"
                                    :page-count="Rules.pages"
                                    :page-size="Rules.pageSize"
                                    background
                                    :current-page.sync="pageNum"
                                    layout="prev, pager, next,total"
                                    v-loading="rule_loading"
                                    @current-change="handleCurrentChange"
                                    prev-text="上一页"
                                    next-text="下一页">
                            </el-pagination>
                        </div>
                        <div class="tesgt3243">
                            <el-button type="success" @click="newRuleDia=true">新建方案</el-button>
                        </div>


                    </div>
                </el-row>
            </el-row>
        </div>
        <div style="width: 60%">



        </div>
        <!--新增-->
        <!--详情-->
        <div>
            <el-drawer
                    title="方案详情"
                    :visible.sync="dialogVisible"
                    direction="rtl"
                    size="40%"
                    :before-close="handleDrawerClose"
                    v-if="currentRule!=''">

                <div>
                    <div style="margin: 20px auto auto 20px;font-size: 28px">
                        <span>方案名称</span>
                        <el-input
                                :placeholder="currentRule.ruleName"
                                v-model="newName"
                                clearable>
                        </el-input>
                    </div>
                    <div style="margin: 20px auto auto 20px;font-size: 28px">
                        <el-row>
                            <el-col :span="3">
                                <el-row><span>周一</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[0]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[1]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周二</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[2]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[3]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周三</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[4]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[5]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周四</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[6]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[7]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周五</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[8]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[9]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周六</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[10]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[11]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周末</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[12]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="currentRule.weeks[13]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <!--<el-col :span="5">-->
                            <!--<el-row><span>操作</span></el-row>-->
                            <!--<el-row><el-button type="success" icon="el-icon-check" size="small" circle @click="handleWeeksChange(currentRule,true)"></el-button></el-row>-->
                            <!--<el-row><el-button type="danger" icon="el-icon-delete" size="small" circle @click="handleWeeksChange(currentRule,false)"></el-button></el-row>-->
                            <!--</el-col>-->
                        </el-row>
                    </div>
                    <div class="op">

                        <div>
                            <span>操作</span>
                        </div>
                        <div>
                            <el-button type="success" icon="el-icon-check" size="large" @click="handleNewChange(true)" round></el-button>
                        </div>
                        <div>
                            <el-button type="danger" icon="el-icon-delete" size="large" @click="handleNewChange(false)" round></el-button>
                        </div>

                    </div>
                </div>


            </el-drawer>
            <el-drawer
                    title="新增排班方案"
                    :visible.sync="newRuleDia"
                    direction="ltr"
                    size="40%"
                    :before-close="handleNewDrawerClose">

                <div>
                    <div style="margin: 20px auto auto 20px;font-size: 28px">
                        <span>方案名称</span>
                        <el-input
                                :placeholder="newRule.ruleName"
                                v-model="newRuleName"
                                clearable>
                        </el-input>
                    </div>
                    <div style="margin: 20px auto auto 20px;font-size: 28px">
                        <el-row>
                            <el-col :span="3">
                                <el-row><span>周一</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[0]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[1]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周二</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[2]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[3]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周三</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[4]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[5]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周四</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[6]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[7]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周五</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[8]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[9]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周六</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[10]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[11]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <el-col :span="3">
                                <el-row><span>周末</span></el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[12]">上午</el-checkbox>
                                </el-row>
                                <el-row>
                                    <el-checkbox v-model="newRule.weeks[13]">下午</el-checkbox>
                                </el-row>
                            </el-col>
                            <!--<el-col :span="5">-->
                            <!--<el-row><span>操作</span></el-row>-->
                            <!--<el-row><el-button type="success" icon="el-icon-check" size="small" circle @click="handleWeeksChange(currentRule,true)"></el-button></el-row>-->
                            <!--<el-row><el-button type="danger" icon="el-icon-delete" size="small" circle @click="handleWeeksChange(currentRule,false)"></el-button></el-row>-->
                            <!--</el-col>-->
                        </el-row>
                    </div>
                    <div class="op">

                        <div>
                            <span>操作</span>
                        </div>
                        <div>
                            <el-button type="success" icon="el-icon-check" size="large" @click="handleNewRuleBtn" round></el-button>
                        </div>

                    </div>
                </div>


            </el-drawer>
        </div>
    </div>
</template>

<script>
    export default {
        name: "rule", methods: {
            InitRule(pageNum, pageSize) {
                let url = `http://localhost:8082/rule/allWithPage?pageSize=` + pageSize + `&pageNum=` + pageNum;
                this.$ajax.get(url).then(res => {
                    this.Rules = res.data;
                    // console.log(res)
                    this.rule_loading = false;
                });
            },
            changeRule() {
                this.dialogVisible = false;
                let url = `http://localhost:8082/schedul/change?userID=` + this.currentRow.id + `&ruleID=` + this.oldRuleID;
                this.$ajax.get(url).then(res => {
                    alert(res.data)
                });
            },
            handleCurrentChange() {
                console.log(this.pageNum)
                this.InitRule(this.pageNum, this.pageSize);
            },
            handleWeeksChange(obj, del) {
                this.currentObj = obj;
                if (del) {
                    let params = "?ID=" + this.currentObj.id;
                    for (let i = 0; i < this.currentObj.weeks.length; i++) {
                        // alert(params)
                        if (this.currentObj.weeks[i]) {
                            params += "&weeks=true";
                        } else {
                            params += "&weeks=false";
                        }
                    }
                    // alert(params)
                    let url = `http://localhost:8082/rule/update` + params;
                    this.$ajax.get(url).then(res => {
                        // alert(res.data)
                        if (res.data == "0") {
                            this.$notify.success({
                                title: '通知',
                                message: '更新成功',
                                showClose: false
                            });
                        } else {
                            this.$notify.error({
                                title: '通知',
                                message: '更新出错，请重试',
                                showClose: false
                            });
                        }
                        this.InitRule(this.pageNum, this.pageSize);
                    })
                }
                else {
                    //删除
                    let url = `http://localhost:8082/rule/del?ID=` + this.currentObj.id;
                    this.$ajax.get(url).then(res => {
                        if (res.data == "0") {
                            this.$notify.success({
                                title: '通知',
                                message: '更新成功',
                                showClose: false
                            });
                        }

                        else {
                            this.$notify.error({
                                title: '通知',
                                message: res.data + "人正在执行该方案，不可删除",
                                showClose: false
                            });
                        }
                    });
                }
            },
            handleChange(val) {
                if (val === '') {
                    this.dialogVisible = false;
                } else {
                    this.currentRule = this.Rules.list[val];
                    // console.log(this.currentRule)
                    this.dialogVisible = true;
                }
            },
            handleDrawerClose() {
                this.dialogVisible = false;
            },
            handleNewDrawerClose(){
                this.newRuleDia=false;
            },
            handleNewChange(val){
                if(val){
                    // 保存
                    let params = "?ID=" + this.currentRule.id;
                    for (let i = 0; i < this.currentRule.weeks.length; i++) {
                        // alert(params)
                        if (this.currentRule.weeks[i]) {
                            params += "&weeks=true";
                        } else {
                            params += "&weeks=false";
                        }
                    }
                    if(this.newName != ''){
                        params += "&ruleName="+this.newName;
                    }
                    else{
                        params += "&ruleName="+this.currentRule.ruleName;
                    }
                    // alert(params)
                    let url = `http://localhost:8082/rule/update` + params;
                    this.$ajax.get(url).then(res => {
                        // alert(res.data)
                        if (res.data == "0") {
                            this.$notify.success({
                                title: '通知',
                                message: '更新成功',
                                showClose: false
                            });
                            this.newName='';
                            this.dialogVisible=false;
                        } else {
                            this.$notify.error({
                                title: '通知',
                                message: '更新出错，请重试',
                                showClose: false
                            });
                        }
                        this.InitRule(this.pageNum, this.pageSize);
                    })
                }else{
                    //删除
                    let url = `http://localhost:8082/rule/del?ID=` + this.currentRule.id;
                    this.$ajax.get(url).then(res => {
                        if (res.data == "0") {
                            this.$notify.success({
                                title: '通知',
                                message: '删除成功',
                                showClose: false
                            });
                            this.dialogVisible=false;
                            this.InitRule(this.pageNum, this.pageSize);
                        }
                        else {
                            this.$notify.error({
                                title: '通知',
                                message: res.data + "人正在执行该方案，不可删除",
                                showClose: false
                            });
                        }
                    });
                }
            },
            handleNewRuleBtn(){
                let params = "?";
                for (let i = 0; i < this.newRule.weeks.length; i++) {
                    // alert(params)
                    if (this.newRule.weeks[i]) {
                        params += "&weeks=true";
                    } else {
                        params += "&weeks=false";
                    }
                }
                if(this.newRuleName != ''){
                    params += "&ruleName="+this.newRuleName;
                }
                else{
                    params += "&ruleName="+this.newRule.ruleName;
                }
                let url = `http://localhost:8082/rule/new` + params;

                // alert(url)
                this.$ajax.get(url).then(res => {
                    // alert(res.data)
                    if (res.data == "0") {
                        this.$notify.success({
                            title: '通知',
                            message: '新增成功',
                            showClose: false
                        });
                        this.newRuleName='';
                        this.newRuleDia=false;
                    } else {
                        this.$notify.error({
                            title: '通知',
                            message: '请重试',
                            showClose: false
                        });
                    }
                    this.InitRule(this.pageNum, this.pageSize);
                })
            },
        },
        data() {
            return {
                Rules: [],
                dialogVisible: false,
                newRuleDia:false,
                currentRow: '',
                rule_loading: true,
                currentRule: '',
                ruleID: '',
                oldRuleID: '',
                pageNum: 1,
                pageSize: 4,
                currentObj: [],
                currentIndex: '',
                newName: '',
                newRuleName:'',
                newRule:{
                    weeks:[true,true,true,true,true,true,true,true,true,true,false,false,false,false],
                    ruleName:"NewRule"
                },
            }
        },
        mounted: function () {
            this.InitRule(this.pageNum, this.pageSize);
        },
        created: function () {

        },

    }
</script>

<style scoped>
    .ruleDiv {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .allList {
        width: 100%;
    }
    .listItem {
        background-color: #e8f3fe;
        cursor: pointer;
        margin-top: 20px;
        font-size: 28px;
        font-family: 楷体;
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
    }
    .listItem > .name9{
        color: #7dbcfc;
    }
    .op{
        margin: 20px;
        margin-top: 50px;
        font-size: 25px;
    }
    .op div{
        display: inline-block;
        width: 200px;
    }
    .tesgt3243{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

</style>